<template>
	<view class="all-main">
		<view class="main">
			<view v-if="!signatureShow" class="content">
				<view class="title">
					<text>{{data.title}}</text>
				</view>
				<view class="con" v-html="data.content"></view>
				<view class="items">
					<view class="tags">
						<text>承诺人（签名/盖章）：</text>
					</view>
					<view class="values">
						<u--image v-if="signFile != ''" :src="api_url + signFile" width="100px" height="50px"></u--image>
					</view>
				</view>
				<view class="items">
					<view class="tags">
						<text>身份证号/统一社会信用代码：</text>
					</view>
					<view class="values">
						<text>{{userinfo.idcards}}</text>
					</view>
				</view>
				<view class="items">
					<view class="tags">
						<text>联系电话：</text>
					</view>
					<view class="values">
						<text>{{userinfo.phone}}</text>
					</view>
				</view>
				<view v-if="!is_sign" class="btns" @click="signClick">
					<text>点击签名</text>
				</view>
				<view v-else class="btns" @click="successClick">
					<text>确认已完成，并返回</text>
				</view>
			</view>
			<view v-else class="signature">
				<piaoyiSignature @onSuccess="onSuccess" @onError="onError" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	import piaoyiSignature from '@/uni_modules/piaoyi-signature/components/piaoyi-signature/piaoyi-signature.vue'
	var util = require('@/util/request.js');
	export default {
		components: {
			piaoyiSignature
		},
		data() {
			return {
				signatureShow: false,
				is_sign: false,
				signFile: '',
				data: {
					title: '承诺函',
					content: '承诺函内容'
				},
				userinfo: {},
				api_url: '',
			};
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.api_url = util.API_URL
			this.loadData()
		},
		methods: {
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'bill/getAgreement'
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.data = res.data
				}
			},
			// 图片上传
			async uploadFile(base) {
				uni.showLoading({
					title: '上传中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'common/uploadFile',
					data: {
						file: base
					},
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.signFile = res.data.url
					this.signatureShow = false
					this.is_sign = true
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 签名成功
			onSuccess(e) {
				let systemInfo = uni.getSystemInfoSync();
				let _this = this
				if (systemInfo.platform === 'h5') {
				    _this.uploadFile(e)
				} else {
					pathToBase64(e)
						.then(base64 => {
							_this.uploadFile(base64)
						})
						.catch(error => {
							console.error(error)
						})
				}
			},
			// 签名失败
			onError(e) {
				// console.log(e)
			},
			// 点击签名
			signClick() {
				this.signatureShow = true
			},
			// 确认签名并返回
			successClick() {
				uni.$emit('signFile', this.signFile)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {

			.content {
				margin: 30rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 30rpx;

				.title {
					font-weight: bold;
					text-align: center;
					border-bottom: 1px solid #f4f4f5;
					padding-bottom: 30rpx;
				}

				.con {
					padding-top: 30rpx;
					font-size: 30rpx;
					line-height: 60rpx;
				}

				.items {
					display: flex;
					padding: 20rpx 0;
					font-size: 30rpx;
					align-items: center;
				}

				.btns {
					width: 100%;
					background-color: #2979ff;
					color: #ffffff;
					margin-top: 30rpx;
					text-align: center;
					padding: 30rpx 0;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>